<template>
  <style include="cr-shared-style">
    hr {
      background: rgba(0, 0, 0, 0.11);
      border-width: 0;
      height: 1px;
      margin: 8px 0;
    }

    @media (prefers-color-scheme: dark) {
      hr {
        background: var(--cr-separator-color);
      }
    }

    .drag-above::before,
    .drag-below::after {
      background-clip: padding-box;
      background-color: var(--interactive-color);
      border: 3px solid var(--interactive-color);
      border-bottom-color: transparent;
      border-radius: 0;
      border-top-color: transparent;
      box-sizing: border-box;
      content: '';
      display: block;
      height: 8px;
      left: 0;
      position: absolute;
      right: 0;
      z-index: 1;
    }

    .drag-above::before {
      top: 0;
      transform: translateY(-50%);
    }

    .drag-below::after {
      bottom: 0;
      transform: translateY(50%);
    }

    .drag-on {
      background-color: var(--highlight-color);
    }

    :host-context([hide-focus-ring]) [tabindex]:focus {
      outline: none;
    }

    .folder-icon {
      content: url(chrome://theme/IDR_FOLDER_CLOSED);
      height: var(--folder-icon-size);
      min-width: var(--folder-icon-size);
      width: var(--folder-icon-size);
    }

<if expr="is_macosx">
    .folder-icon {
      --folder-icon-size: 16px;
    }

    @media (prefers-color-scheme: dark) {
      .folder-icon {
         content: url(chrome://theme/IDR_FOLDER_CLOSED_WHITE);
      }
    }
</if>

<if expr="not is_macosx">
    .folder-icon {
      --folder-icon-size: 20px;
    }

    .folder-icon[open] {
      content: url(chrome://theme/IDR_FOLDER_OPEN);
    }
</if>

    :host-context([enable-branding-update]) .folder-icon {
      -webkit-mask-image: url(chrome://bookmarks/images/folder_open.svg);
      -webkit-mask-position: center;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: var(--cr-icon-size);
      background-color: var(--iron-icon-fill-color);
      content: none;
    }

    :host-context([dir=rtl]) .folder-icon {
      transform: scaleX(-1);
    }

    .website-icon {
      background-repeat: no-repeat;
      height: 16px;
      margin: 2px;
      width: 16px;
    }
  </style>
</template>
